<template>
   <view>
    
	<view class="top-container">
    <view class="top-img-box">
      <image class="top-img" :src="userinfo.avatarUrl" mode=""></image>
    </view>
    <text class="top-text">{{userinfo.nickName}}</text>
	</view>
  
    <view class="dingdan-nav">
      <text>收藏的店铺</text>
       <text>收藏的商品</text>
        <text>关注的商品</text>
         <text>足迹</text>
    </view>
 <!-- 图片导航 -->
 <view class="dingdan-box">
  <view class="my-dingdan">
    <text>我的订单</text>
  </view>
  <view class="dingdan-item">
    <view class="dingdan-image">
      <image src="../../static/my-icons/icon1.png" mode=""></image>
      <text>待付款</text>
    </view>
    <view class="dingdan-image">
      <image src="../../static/my-icons/icon2.png" mode=""></image>
      <text>待收货</text>
    </view>
    <view class="dingdan-image">
      <image src="../../static/my-icons/icon3.png" mode=""></image>
      <text>退款/退货</text>
    </view>
    <view class="dingdan-image">
      <image src="../../static/my-icons/icon4.png" mode=""></image>
      <text>全部订单</text>
    </view>
    
  </view>
 </view>
 
 <!-- 文字导航 -->
   <view class="text-box">
     <view class="text-item" >
       <text>收货地址</text>
       <uni-icons type="forward" size="30"></uni-icons>
     </view>
     <view class="text-item" >
       <text>联系客服</text>
       <uni-icons type="forward" size="30"></uni-icons>
     </view>
     <view class="text-item" @click="backLogin">
       <text>退出登录</text>
       <uni-icons type="forward" size="30"></uni-icons>
     </view>
   </view>
    
    
  </view>
</template>

<script>
  import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
			token:''
			};
    },
    computed:{
      ...mapState('m_user',['userinfo'])
      
    },
    methods:{
      ...mapMutations('m_user',['cleanToken']),
      // 退出登录的一个处理函数
      	backLogin(){
          this.cleanToken(this.token)
         
        }
    }
	}
</script>

<style lang="scss">
  page{
    background-color: #F4F4F4;
   

.top-container{
  height: 200px;
  background-color: #C00000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .top-img-box{
    height: 100px;
    width: 100px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
     .top-img{
       width: 90%;
       height: 90%;
       border-radius: 100%;
       border: 1px solid grey;
     }
    }
  .top-text{
    font-size: 12px;
    margin-top: 10px;
    color: white;
  }
}   
.dingdan-nav{
  width: 350px;
  height: 60px;
  background-color: white;
  position: absolute;
  top: 190px;
  left:15px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  text{
    font-size: 12px;
  }
}
.dingdan-box{
  position: absolute;
  height: 110px;
  top:260px ;
  border-radius: 3px;
  background-color: white;
  width: 350px;
  left:15px;
  .my-dingdan{
    margin-left: 10px;
    height: 50px;
    display: flex;
    align-items: center;
    font-weight: bold;
  }
  .dingdan-item{
    display: flex;
    justify-content: space-around;
    .dingdan-image{
      display: flex;
      flex-direction: column;
      align-items:center;
      image{
        width: 35px;
        height: 35px;
      }
    }
  }
}
.text-box{
  position: absolute;
  height: 150px;
  width: 350px;
  bottom: 20px;
  left: 15px;
  border-radius: 3px;
  background-color: white;
  display: flex;
  flex-direction: column;
  .text-item{
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    text{
      font-size: 16px;
      margin-left: 10px;
    }
    .uni-icons{}
  }
}
}
</style>
